<template>
  <view class="ticket-usage-page">
    <!-- 套票名称 -->
    <view class="ticket-name">
      <text>套票名称：{{ ticketInfo.name }}</text>
    </view>
    
    <!-- 使用记录列表 -->
    <view class="usage-list">
      <view 
        class="usage-item" 
        v-for="(record, index) in ticketInfo.usageRecords" 
        :key="index"
      >
        <!-- 使用时间 -->
        <text class="usage-time">{{ record.time }}</text>
        
        <!-- 使用详情 -->
        <view class="usage-details">
          <view class="detail-row">
            <text class="detail-label">使用设备：</text>
            <text class="detail-value">{{ record.device }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">使用数量：</text>
            <text class="detail-value">{{ record.usedCount }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">剩余数量：</text>
            <text class="detail-value">{{ record.remainingCount }}</text>
          </view>
        </view>
        
        <!-- 分隔线（最后一项无分隔线） -->
        <view class="divider" v-if="index !== ticketInfo.usageRecords.length - 1"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 套票信息及使用记录数据
      ticketInfo: {
        name: '10次票',
        usageRecords: [
          {
            time: '2025-8-30 15:00:00',
            device: '淘气堡B',
            usedCount: 1,
            remainingCount: 9
          },
          {
            time: '2025-8-30 15:00:00',
            device: '淘气堡B',
            usedCount: 1,
            remainingCount: 9
          },
          {
            time: '2025-8-30 15:00:00',
            device: '淘气堡B',
            usedCount: 1,
            remainingCount: 9
          },
          {
            time: '2025-8-30 15:00:00',
            device: '淘气堡B',
            usedCount: 1,
            remainingCount: 9
          }
        ]
      }
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.memberTicketUseRecord')
  	});
  },
};
</script>

<style scoped>
/* 页面容器 */
.ticket-usage-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 16px;
  box-sizing: border-box;
}

/* 套票名称 */
.ticket-name {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.ticket-name text {
  font-size: 16px;
  color: #333333;
  font-weight: 500;
}

/* 使用记录列表 */
.usage-list {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

/* 单条使用记录 */
.usage-item {
  padding: 15px 0;
}

/* 使用时间 */
.usage-time {
  display: block;
  font-size: 15px;
  color: #666666;
  margin-bottom: 12px;
  padding-left: 2px;
}

/* 使用详情区域 */
.usage-details {
  padding-left: 2px;
}

/* 详情行 */
.detail-row {
  display: flex;
  margin-bottom: 8px;
  line-height: 1.5;
}

.detail-row:last-child {
  margin-bottom: 0;
}

/* 详情标签 */
.detail-label {
  font-size: 14px;
  color: #666666;
  width: 90px;
  flex-shrink: 0;
}

/* 详情值 */
.detail-value {
  font-size: 14px;
  color: #333333;
  flex: 1;
}

/* 分隔线 */
.divider {
  height: 1px;
  background-color: #f5f5f5;
  margin-top: 15px;
}
</style>